<template>
	<view>
		<zmm-watermark :watermark="userStore.watermark" v-if="userStore.watermark"></zmm-watermark>
		<view class="content detail">
			<!--商户池信息-->
			<view class="detail-item">
				<uni-section title="商户池信息" type="line"></uni-section>
				<view class="detail-content">
					<!-- <view class="detail-text">ID：<text>{{info.id}}</text></view> -->
					<view class="detail-text">区域：<uni-tag size="small" :text="arrText(setStore.allProvinceList, info.regionCode)"></uni-tag></view>
					<view class="detail-text">
						客户姓名：
						<text>{{info.customerName}}</text>
						<text class="detail-text-copy" @click.stop="copyText(info.customerName)">复制</text>
					</view>
					<view class="detail-text">
						联系电话：
						<text>{{info.phone == '18888888888' ? '无' : info.phone}}</text>
						<text class="detail-text-copy" @click.stop="copyText(info.phone == '18888888888' ? '' : info.phone)">复制</text>
						<text class="detail-text-copy" @click.stop="call(info.phone == '18888888888' ? '' : info.phone)">拨打</text>
					</view>
					<view class="detail-text">线索等级：<text>{{arrText(customerClueLevelList, info.level)}}</text></view>
					<view class="detail-text">
						门店名称：
						<text>{{info.storeName}}</text>
						<text class="detail-text-copy" @click.stop="copyText(info.storeName)">复制</text>
					</view>
					<view class="detail-text">
						门店地址：
						<text>{{info.addr}}</text>
						<text class="detail-text-copy" @click.stop="copyText(info.addr)">复制</text>
					</view>
					<view class="detail-text">
						地址详情：
						<text>{{info.addrDetail}}</text>
						<text class="detail-text-copy" @click.stop="copyText(info.addrDetail)">复制</text>
					</view>
					<!-- <view class="detail-text">经度：<text>{{info.lng}}</text></view>
					<view class="detail-text">纬度：<text>{{info.lat}}</text></view> -->
					<view class="main-flex detail-text detail-flex-start">
						门店图片：
						<view class="detail-text_r detail-text-banners main-flex main-flex-item detail-flex-wrap">
							<up-image
								v-for="item in bannerList"
								:key="item"
								class="detail-text-banner"
								width="120rpx"
								height="120rpx"
								@click.stop="previewImg(item, bannerList)"
								:src="item"
								:lazy-load="true"></up-image>
							<!-- <up-image width="120rpx" height="120rpx" @click.stop="previewImg(info.storeImag)" :src="info.storeImag" :lazy-load="true"></up-image> -->
						</view>
					</view>
					<view class="detail-text">
						转化订单：
						<text>{{info.translationOrderNumber}}</text>
						<text v-if="info.translationOrderNumber" class="detail-text-copy" @click.stop="copyText(info.translationOrderNumber)">复制</text>
						<text v-if="info.translationOrderNumber" class="detail-text-copy" @click.stop="goOrder(info.translationOrderNumber)">查看</text>
					</view>
					<view class="detail-text">关联销售：<text>{{info.relationSalesmanName}}</text></view>
					<view class="detail-text">是否公海：<uni-tag size="small" :type="info.isPublic == 0 ? 'success' : ''" :text="arrText(salesmanClueIsPublicList, info.isPublic)" /></view>
					<view class="detail-text">拜访人：<text @click="copyText(info.createName)">{{info.createName}}</text></view>
					<view class="detail-text" v-if="info.updateName">更新者：<text @click="copyText(info.updateName)">{{info.updateName}}</text></view>
					<view class="detail-text">时间：<text >{{info.createTime}}</text></view>
					<view class="detail-text">线索状态：<uni-tag size="small" :type="info.status == 0 ? 'success' : ''" :text="arrText(salesmanClueStatusList, info.status)" /></view>
				</view>
			</view>
			<!--地图位置-->
			<view class="detail-item" v-show="info.lat">
				<uni-section title="地图位置" type="line"></uni-section>
				<view class="detail-content">
					<map
						:latitude="info.lat"
						:longitude="info.lng"
						:markers="markers"
						style="width: 100%; height: 300px;">
					</map>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { computed, onMounted, onUnmounted, ref } from 'vue';
import { tab, auth, modal } from "@/plugins"
import { getTitle } from "@/utils/getter"
import { checkPermi, checkRole, checkOnlyPermi, checkOnlyRole } from "@/utils/permission"
import { allProvince } from "@/api/erp_api/region"
import { customerClueLevel } from "@/api/system/dict/data"
import { copyText, arrText, previewImg } from '@/utils/ty.js';
import { salesmanClueDetail } from "@/api/erp_api/sale"
import { salesmanClueStatusList, salesmanClueIsPublicList } from '@/utils/config.js'
import useUserStore from '@/store/modules/user'
import useSetStore from '@/store/modules/set'

	const userStore = useUserStore()
	const setStore = useSetStore()
	onLoad(async (option) => {
		if (option.id) {
			id.value = option.id
			await getCustomerClueLevel()
			getDetail()
		}
	})
	
	// 线索等级
	const customerClueLevelList = ref([])
	const getCustomerClueLevel = () => {
		return customerClueLevel().then(res => {
			customerClueLevelList.value = res.data.map(item => {
				return {
					...item,
					value: item.dictValue,
					text: item.dictLabel
				}
			}) || []
		})
	}
	
	// 数据查询
	const id = ref('')
	const info = ref({})
	const markers = ref([])
	const isLoading = ref(false)
	
	const getDetail = () => {
		const params = {
			id: id.value
		}
		isLoading.value = true
		uni.showLoading({
			title: '数据加载中...'
		})
		salesmanClueDetail(params).then(res => {
			info.value = res.data || {}
			markers.value.push({
				id: res.data.id,
				latitude: res.data.lat,
				longitude: res.data.lng,
				// #ifndef APP-IOS
				iconPath: '/static/images/locaton4.png',
				width: 48,
				height: 48,
				// #endif
				// #ifdef APP-IOS
				iconPath: '/static/images/locaton2.png',
				width: 20,
				height: 20,
				// #endif
				title: res.data.customerName,
				label: {
					content: res.data.customerName
				},
				callout: {
					display: 'BYCLICK',
					content: `${res.data?.storeName? '店铺：'+res.data.storeName+'；' : ''}电话：${res.data?.phone || '无'}；地址：${res.data?.addrDetail || res.data?.addr}`
				}
			})
			isLoading.value = false
			uni.hideLoading()
    }).catch(() => {
			isLoading.value = false
			uni.hideLoading()
		})
	}
	// 拨打电话
	const call = (phoneNumber) => {
		uni.makePhoneCall({
			phoneNumber: phoneNumber
		})
	}
	// 查看订单
	const goOrder = (orderNumber) => {
		uni.navigateTo({
			url: `/pages/order/order?orderNumber=${orderNumber}`
		})
	}
	// banner图
	const bannerList = computed(() => {
		return info.value.storeImag ? info.value.storeImag.split(',').filter(item => item) : []
	})
</script>

<style scoped lang="scss">
.detail-text-banners {
	margin-left: -10rpx;
}
.detail-text-banner {
	margin: 0 10rpx 10rpx;
}
</style>
